<template>
  <div class="image-card" @click="clock_box">
    <div class="images">
      <div class="image-container" v-for="(img, index) in data.images" :key="index">
        <img :src="img" :alt="data.title" class="item-image" />
      </div>
    </div>
    <div class="item-details">
      <h3 class="item-title" @mousemove="tip_close">{{ data.title }}</h3>
      <p class="item-time">{{ data.date }}</p>
      <p class="item-type">-{{ data.kind }}-</p>
      <div class="item-description">
        <p>{{ data.text }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import {  success} from "../../static/js/alert.js"
const emit = defineEmits(['show_txtpreview_close']);
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({
      images: [],
      title: '',
      time: '',
      type: '',
      description: ''
    })
  }

});
function clock_box() {
    emit('show_txtpreview_close', false);
}
function tip_close() { 
  success("任意点击即可收起!")
}
</script>

<style scoped>
.image-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  max-width: 400px;
  background-color: #fff;
  z-index: 100;
}

.images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* 限制高度 */
  overflow: hidden;
  flex: 1 1 calc(33.333% - 8px); /* 适应三列布局 */
  max-width: calc(33.333% - 8px); /* 适应三列布局 */
  position: relative;
}

.item-image {
  max-height: 100%;
  width: auto;
  position: absolute; /* 确保图片按比例缩放 */
}

.item-details {
  margin-top: 8px;
}

.item-title {
  font-size: 1.2em;
  margin: 0;
}

.item-time,
.item-type {
  font-size: 0.9em;
  color: #777;
  margin: 4px 0;
}

.item-description {
  margin-top: 8px;
  font-size: 0.9em;
  color: #555;
}
</style>